<template>
  <!--更换客户归属-->
  <section style="width:100%; padding-top: 25px;margin-top: 15px" v-loading="loading">
    <el-form
      :model="form"
      label-width="180px"
      :rules="swapRules"
      ref="swapForm"
      @submit.prevent="onSubmitClientSwap"
      style="margin:20px;width:60%;min-width:600px;">
      <el-form-item label="更换代理商" required>
        <el-select v-model="form.swapAgentId"
                   placeholder="请选择">
          <el-option
            v-for="item in agentOptions"
            :key="item.id"
            :label="item.agent_name"
            :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="请选择代理的员工" prop="swapEmployeeId">
        <el-select v-model="form.swapEmployeeId"
                   clearable
                   placeholder="请选择">
          <el-option
            v-for="item in employeeListOptions"
            :key="item.id"
            :label="item.employee_name"
            :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click.native.prevent="onSubmitClientSwap" :loading="btnLoading">修改</el-button>
        <el-button @click.native.prevent="$router.go(-1)">返回</el-button>
      </el-form-item>
    </el-form>

  </section>
</template>

<script>
  import {fetchClientInfoWithHeritSelectorList, swapClientHeritRelation, clientInfo} from '../../api/client';

  export default {
    data() {
      let checkEmployeeId = (rule, value, callback) => {
        console.log(value)
        if (Number(value) < 1) {
          callback();
        }
        this.employeeListOptions.forEach(emp => {
          if (emp.id == value) {
            callback();
          }
        })
        callback(new Error('员工不属于您选择的代理商请重新选择,或者选择其他员工,或者清除选择'));

      };


      return {
        clientInfo: {},
        form: {
          swapAgentId: null,
          swapEmployeeId: null,
          clientId: null,
          relationId: null,
        },
        swapRules: {
          swapEmployeeId: [
            {validator: checkEmployeeId, trigger: 'blur'}
          ],
        },
        loading: false,
        btnLoading: false,
        agentOptions: [],
        employeeListOptions: [],
      }
    },
    methods: {

      fetchSwapHeritSelectorListThenFetchClientInfo() {
        this.loading = true;
        fetchClientInfoWithHeritSelectorList(this.$route.params).then(res => {
          this.agentOptions = res.data.list;
          //zai获取客户关系
          this.clientInfo = res.data.client;
          this.loading = false;
        }).catch(error => this.ezNotifyAxiosCatch(error));
      },
      onSubmitClientSwap() {
        this.$refs.swapForm.validate(valid => {
          if (valid) {
            this.btnLoading = true;
            swapClientHeritRelation(this.form).then(res => {
              this.ezNotifyAxiosThen(res);
              this.btnLoading = false;
            }).catch(error => this.ezNotifyAxiosCatch(error));
          }
        })

      },

    },
    watch: {
      clientInfo: function (newValue) {
        this.form.swapAgentId = newValue.relation.direct_agent_id;
        let someId = newValue.relation.direct_emp_id;
        if (someId > 0) {
          this.form.swapEmployeeId = someId;
        }
        this.form.clientId = newValue.id;
        this.form.relationId = newValue.relation.id;
      },
      'form.swapAgentId': function (newValue) {
        this.employeeListOptions = null;
        //根据选中的代理商来 更新下拉员工列表
        this.agentOptions.forEach(value => {
          if (value.id == newValue && value.id != 1) {
            this.employeeListOptions = value.employees;
          }
        });
      }
    },
    created() {
      this.fetchSwapHeritSelectorListThenFetchClientInfo();
    }
  }
</script>

<style scoped>


</style>
